<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          话题列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">添加一级分类</el-button>
          </div>
        </div>
        <div class="task_table" v-loading="boo.loading">
          <div class="title-content">
            <span class="th-title" style="width: 6%">序号</span>
            <span class="th-title" style="width: 14%">话题图标</span>
            <span class="th-title" style="width: 18%">一级话题</span>
            <span class="th-title" style="width: 14%">二级话题图标</span>
            <span class="th-title" style="width: 18%">二级话题</span>
            <span class="th-title" style="width: 30%">操作</span>
          </div>
          <div class="table-content">
            <div class="table-con" v-for="(item,index) in list" :key="index">
              <div class="table-bottom">
                <span style="width: 6%" class="tr-item">{{(index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                <span style="width: 14%" class="tr-item clear ellipsis">
                  <img v-if="item.img" class="tb" :src="item.img"/>
                  <el-upload
                    v-else
                    class="avatar-uploader jx-uploader"
                    name="pic"
                    :data="upload"
                    :headers="headers"
                    :action="$api.common.upload"
                    :show-file-list="false"
                    :on-success="upload1Success">
                    <img v-if="other.img" :src="other.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload> 
                </span>
                <span style="width: 18%" class="tr-item ellipsis">
                  <p v-if="item.category_one != ''">{{item.category_one}}</p>
                  <el-input v-else class="tel-value" v-model="other.list.category_one"></el-input>
                </span>
                <!-- 二级类目开始 -->
                <div style="width: 99.99%" class="er-list">
                  <!-- 二级类目子项 -->
                  <div class="er-item" style="width: 100%" v-for="(ite,idx) in item.list" :key="idx">
                    <span style="width: 23%" class="td-item ellipsis">
                      <img v-if="ite.img2" class="tb" :src="ite.img2"/>
                      <el-upload
                        v-else
                        class="avatar-uploader jx-uploader"
                        name="pic"
                        :data="upload"
                        :headers="headers"
                        :action="$api.common.upload"
                        :show-file-list="false"
                        :on-success="upload2Success">
                        <img v-if="other.img2" :src="other.img2" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload> 
                    </span>
                    <span style="width: 29%" class="td-item ellipsis">
                      <p v-if="ite.category_two != ''">{{ite.category_two}}</p>
                      <el-input v-else class="tel-value" v-model="other.list.category_two"></el-input>
                    </span>
                    <span style="width: 48%" class="td-item ellipsis">
                      <el-button v-if="ite.shoptype == ''" @click="submitRow_new(item)" type="text" size="small">保存</el-button>
                      <p v-else>
                        <el-button @click="viewRow(item)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteRow(ite)" type="text" size="small">删除</el-button>
                        <el-button v-if="idx == 0" @click="addcategory(item)" type="text" size="small">添加子话题</el-button>
                      </p>
                    </span>
                  </div>        
                </div>                
                <!-- 二级类目结束 -->
              </div>
            </div>
          </div>       
        </div>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑类目 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">编辑话题</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="二级话题图标：">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="uploadSuccess">
                      <img v-if="currentRow.img" :src="currentRow.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="二级话题：" prop="name">
                <el-input v-model="currentRow.name" placeholder="请输入二级话题名称"></el-input>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import list from 'static/json/setting/category.json'
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
        },
        other: {
          allRow: 1,
          saveing: false,
          newCate: false,
          img: '',
          img2: '',
          list: {},
        },
        list: list,
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.list.push({
          category_one: "",
          img: "",
          list: [
            {category_two: "",img2: ""}
          ]
        })
        
      },
      upload1Success(res, file){
        let _self = this
      	if (res.status == 200) {
          _self.other.img = res.data
        } else {
          _self.$message.error(res.message)
        }
      },
      upload2Success(res, file){
        let _self = this
      	if (res.status == 200) {
          _self.other.img2 = res.data
        } else {
          _self.$message.error(res.message)
        }
      },
      // 一级类目添加保存
      submitRow_new(){},
      addcategory(item){
        let _self = this
        item.list.push({category_two: "",img2: ""})
      },
      viewRow(item){
        let _self = this
        _self.boo.showDialog = true
        _self.other.list = JSON.parse(JSON.stringify(item))
      },
      // 删除
      deleteRow(item){
        let _self = this
        
      },
      submitRow(formName){
      }
    }
	}

</script>
<style scoped lang="sass">
.title-content
  display: table
  font-size: 13px
  text-align: center
  background: rgba(64, 158, 255, 0.2)
  width: 100%
  table-layout: fixed
  .th-title
    display: table-cell
    line-height: 40px
    font-weight: 600
    color: #333
.table-content
  font-size: 13px
  .table-bottom
    display: table
    width: 100%
    border: 1px solid #ebeef5
    border-right: 0
    border-bottom: 0
    border-top: 0
    table-layout: fixed
    min-height: 72px
    .tb
      width: 50px
      height: 50px
      border-radius: 50%
      vertical-align: middle
    .tr-item
      text-align: center
      display: table-cell
      vertical-align: middle
      padding: 5px
      border-right: 1px solid #ebeef5
      position: relative
.table-con
  color: #333
  border-bottom: 1px solid #f2f2f2
.er-list
  .er-item +.er-item
    border-top: 1px solid #f2f2f2
  .er-item
    display: table
    .td-item
      text-align: center
      display: table-cell
      vertical-align: middle
      padding: 5px
      border-right: 1px solid #ebeef5
      position: relative
      height: 72px    
/deep/ .avatar-uploader-icon
  height: 50px
  line-height: 50px
  width: 50px
/deep/ .el-upload
  height: 50px !important
/deep/ .jx-uploader .avatar-uploader-icon
  width: 50px
  height: 50px
  line-height: 50px
/deep/ .jx-uploader img
  width: 50px
  height: 50px
</style>
